import React, { useEffect, useState } from "react";
import { Card, Button, Dialog, Space, Toast, Divider } from "antd-mobile";
import { Share, ArrowLeft } from "@nutui/icons-react";
import { NavBar } from "@nutui/nutui-react";
import axios from "axios";
import "./guan.css";
import { useNavigate } from "react-router-dom";

export default function Guan() {
  const navigate = useNavigate();
  const [list, setlist] = useState([]);
  const getList = () => {
    axios.get("http://localhost:3000/xm/list").then((res) => {
      setlist(res.data.data);
    });
  };
  useEffect(() => {
    getList();
  }, []);

  return (
    <div>
      <NavBar
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        right={
          <span className="flex-center" onClick={(e) => Toast.show("icon")}>
            <Share />
          </span>
        }
        onBackClick={() => navigate("/txl")}
      >
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        管理账户
      </NavBar>
      {list.map((item) => {
        return (
          <Card
            key={item._id}
            title={item.name}
            style={{
              "--adm-card-border-radius": "10px",
              border: "1px solid #438ffc",
              marginTop: "15px",
            }}
          >
            <div className="content">
              职位：{item.zhiwei} 单位：{item.danwei} 技能：{item.jineng}
            </div>

            <div className="footer">
              {item.isRenzheng ? (
                <span class="iconfont icon-yirenzheng2"></span>
              ) : (
                <span></span>
              )}
              <span>
                <Button
               
                  color="danger"
                  onClick={() => {
                    Dialog.show({
                      content: "确认删除信息？",
                      closeOnAction: true,
                      actions: [
                        [
                          {
                            key: "cancel",
                            text: "取消",
                          },
                          {
                            key: "delete",
                            text: "确定",
                            bold: true,
                            danger: true,
                            onClick: () => {
                              axios
                                .get(
                                  "http://localhost:3000/xm/del?_id=" + item._id
                                )
                                .then((res) => {
                                  if (res.data.code === 200) {
                                    getList();
                                  }
                                });
                            },
                          },
                        ],
                      ],
                    });
                  }}
                >
                  删除
                </Button>
                <Button
                  color="primary"
                  onClick={() => {
                    Dialog.show({
                      content: "是否要修改信息",
                      closeOnAction: true,
                      actions: [
                        [
                          {
                            key: "cancel",
                            text: "取消",
                          },
                          {
                            key: "delete",
                            text: "确定",
                            bold: true,
                            danger: true,
                            onClick: () => {
                              navigate("/geng?id=" + item._id);
                            },
                          },
                        ],
                      ],
                    });
                  }}
                >
                  修改
                </Button>
              </span>
            </div>
          </Card>
        );
      })}
    </div>
  );
}
